
<script setup lang="ts">
import { ref } from 'vue'
const searchTerm = ref<string>('')
const emit = defineEmits(['search'])
const handleKey = () => {
  emit('search', searchTerm.value)
  searchTerm.value = ''
}

</script>

<template>
  <!-- 头部搜索+图片背景 -->
    <div class="w-full bg-linear-to-t from-purple-800 to-slate-800 text-white">
      <main class="min-h-[40vh] flex justify-center items-center w-full relative">
        <!-- 搜索区域 -->
        <div class="relative inline-block w-lg">
          <div class="absolute inset-0 rounded-full overflow-hidden">
            <div
              class="absolute inset-0 bg-[conic-gradient(from_var(--shimmer-angle),theme(colors.slate.950)_0%,theme(colors.slate.100)_10%,theme(colors.slate.950)_20%)] animate-[shimmer_2.5s_linear_infinite]">
            </div>
            <div class="absolute inset-[2px] rounded-full bg-black"></div>
          </div>
          <div class="flex flex-row items-center w-full">
            <input type="text" placeholder="请输入搜索内容" v-model="searchTerm" @keyup.enter="handleKey"
              class="basis-4/5 relative z-10 rounded-full pl-16 py-6 text-2xl font-bold focus:outline-none bg-transparent text-white placeholder-white/70" />
            <svg class="icon--large relative z-10 basis-1/5" aria-hidden="true" @click="handleKey">

              <use xlink:href="#icon-icon-sousuo"></use>
            </svg>
          </div>
        </div>
      </main>
    </div>
</template>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.icon--large {
  width: 2em;
  height: 2em;
}
</style>
